<template>
  <div class="content">
    <!--百度地图-->
    <MapBaidu class="map" />
    <div class="statistics">
      <!--设备统计-->
      <Device class="device" />
      <!--最新消息-->
      <News class="news" />
    </div>
  </div>
  <!--图表-->
  <div class="echarts-box">
    <div class="mqtt" ref="mqttBox"></div>
    <div class="cup-rate" ref="cupRateBox"></div>
    <div class="memory-rate" ref="memoryRateBox"></div>
    <div class="system-rate" ref="systemRateBox"></div>
    <div class="seat"></div>
  </div>
</template>

<script setup>
import MapBaidu from './particle/Map.vue'
import Device from './particle/Device.vue'
import News from './particle/News.vue'
import * as echarts from 'echarts'
import { useAutoImport } from '@/hooks/autoImport'
const { ref, API, onBeforeMount } = useAutoImport()

const mqttBox = ref(null)
const cupRateBox = ref(null)
const memoryRateBox = ref(null)
const systemRateBox = ref(null)

// 获取柱状图数据
const substr = (num) => +String(num).substring(0, 3)
const optionsMqttBar = ({
  retain_count,
  retain_total,
  subscription_count,
  subscription_total,
  session_count,
  session_total,
  connection_count,
  connection_total,
}) => {
  retain_total = substr(retain_total)
  subscription_total = substr(subscription_total)
  session_total = substr(session_total)
  connection_total = substr(connection_total)
  // 配置项
  return {
    title: {
      text: 'MQTT状态数据',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {},
    yAxis: {
      type: 'value',
    },
    xAxis: {
      type: 'category',
      data: ['保留消息', '路由数量', '订阅数量', '会话数量', '连接数量'],
    },
    toolbox: {
      show: true,
      feature: {
        magicType: { type: ['line', 'bar'] },
      },
    },
    series: [
      {
        name: '当前数量',
        type: 'bar',
        data: [
          retain_count,
          retain_count,
          subscription_count,
          session_count,
          connection_count,
        ],
      },
      {
        name: '累计总数',
        type: 'bar',
        data: [
          retain_total,
          retain_total,
          subscription_total,
          session_total,
          connection_total,
        ],
      },
    ],
  }
}

// 获取饼状图的数据
const optionsPie = (title, data) => {
  return {
    title: {
      text: title,
    },
    legend: {
      right: 0,
      orient: 'vertical',
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/> {b} : {c}%',
    },
    series: [
      {
        name: title,
        type: 'pie',
        radius: [10, 100],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 10,
        },
        data: data,
      },
    ],
  }
}

//柱状图
onBeforeMount(async () => {
  try {
    let { code, data } = await API.home.reqBashBoard()
    if (+code === 200) {
      let chart = echarts.init(mqttBox.value)
      chart.setOption(optionsMqttBar(data))
    }
  } catch (_) {}
})

//饼状图
onBeforeMount(async () => {
  try {
    let { code, data } = await API.home.reqMonitor()
    if (+code === 200) {
      let { cpu, mem } = data
      let chart1 = echarts.init(cupRateBox.value)
      chart1.setOption(
        optionsPie('CPU使用率', [
          { value: cpu.used, name: '用户' },
          { value: cpu.sys, name: '系统' },
          { value: cpu.free, name: '空闲' },
        ]),
      )

      let chart2 = echarts.init(memoryRateBox.value)
      chart2.setOption(
        optionsPie('内存使用率', [
          { value: mem.used, name: '已用' },
          { value: mem.free, name: '剩余' },
        ]),
      )

      let chart3 = echarts.init(systemRateBox.value)
      chart3.setOption(
        optionsPie('系统盘使用率', [
          { value: 30.7, name: '已用' },
          { value: 28.3, name: '可用' },
        ]),
      )
    }
  } catch (_) {}
})
</script>

<script>
export default {
  name: 'IndexWelcome',
}
</script>

<style lang="less" scoped>
.content {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;

  .map {
    box-sizing: border-box;
    margin-right: 20px;
    flex: 1.5;
    height: 600px;
    background: url('@/assets/images/Loading_icon.gif') no-repeat center center
      #fff;
    background-size: 30px 30px;
    border: 2px solid #fff;
  }

  .statistics {
    box-sizing: border-box;
    flex: 1;
    .device,
    .news {
      box-sizing: border-box;
      padding: 15px;
      height: 290px;
      background: #fff;
      overflow: hidden;
    }

    .news {
      margin-top: 20px;
    }
  }
}

.echarts-box {
  margin-top: 20px;
  padding: 20px 15px;
  padding-bottom: 0;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

  @w: calc((100% - 40px) / 3);

  & > div {
    flex-basis: @w;
    height: 350px;
    margin-bottom: 20px;
    background: url('@/assets/images/Loading_icon.gif') no-repeat center center
      #f9f9f9;
    background-size: 30px 30px;

    :deep(div) {
      background: #fff;
    }

    &.mqtt {
      flex-basis: calc(@w * 2 + 20px);
    }

    &.seat {
      background: #fff;
    }
  }
}
</style>
